<template>
  <div class="my-container">
    <div class="slba-header" @click="showSearch = true">
      <div class="my-search">
        <van-icon name="search" color="#D4D4D4" class="my-search-icon" />

        <span
          v-if="dataValue.yhzh || dataValue.lxdh || dataValue.qymc"
          class="my-search-input"
        >
          {{ dataValue.yhzh }} {{ dataValue.lxdh }} {{ dataValue.qymc }}
        </span>
        <span v-else class="my-search-input"> 请选择搜索条件 </span>

        <span class="my-search-btn" @click="onCancel"> 清除 </span>
      </div>
    </div>

    <div class="my-content">
      <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <van-list
          :loading="loading"
          :finished="finished"
          finished-text="已经到底了"
          class="my-list"
          @load="onLoad"
        >
          <div v-for="(item, index) in tableData" :key="index">
            <div>
              <div class="my-item-cell">
                <div class="my-item-cell-title">
                  <span class="my-item-cell-title-text">
                    备案者: {{ item.EnterprisePersonName }}
                  </span>
                </div>
                <div class="my-item-cell-label">
                  <div>
                    <span class="my-item-text-title">用户账号</span>
                    <span class="my-item-text-content">{{
                      item.UserLoginName
                    }}</span>
                  </div>
                  <div>
                    <span class="my-item-text-title">用户密码</span>
                    <span class="my-item-text-content">{{
                      uiUtil.decrypt(item.UserPassword)
                    }}</span>
                  </div>
                  <div>
                    <span class="my-item-text-title">身份证号</span>
                    <span class="my-item-text-content">{{
                      item.PrincipalIDCare
                    }}</span>
                  </div>
                  <div>
                    <span class="my-item-text-title">负责人</span>
                    <span class="my-item-text-content">{{
                      item.PrincipalName
                    }}</span>
                  </div>
                  <div>
                    <span class="my-item-text-title">联系电话</span>
                    <span class="my-item-text-content">{{
                      item.LinkmanPhone
                    }}</span>
                  </div>
                  <div>
                    <span class="my-item-text-title">所在区域</span>
                    <span class="my-item-text-content"
                      >{{ item.RegManageRegionName
                      }}{{ item.LinkmanDomicile }}</span
                    >
                  </div>
                </div>
                <div class="ba-item-cell-btn">
                  <van-button
                    v-if="item.UserStatus == '1'"
                    type="primary"
                    color="#F5F5F5"
                    round
                    style="color: #222222"
                    @click="onDelete($event, item, index)"
                  >
                    删除
                  </van-button>
                  <van-button
                    v-if="item.UserStatus != '1'"
                    type="primary"
                    color="#FEB580"
                    round
                    @click="onHuiFu($event, item, index)"
                  >
                    恢复
                  </van-button>
                  <van-button
                    type="primary"
                    color="#F5F5F5"
                    round
                    style="margin: 0 10px; color: #222222"
                    @click="onPwd($event, item, index)"
                    >重置密码</van-button
                  >
                  <van-button
                    type="primary"
                    color="linear-gradient(to right, #00BF87, #25F0A0)"
                    round
                    @click="onEdit($event, item, index)"
                    >修改信息</van-button
                  >
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>

    <ShaiXuanTiaoJianPoPups
      :show="showSearch"
      :dataValue="dataValue"
      @update:show="showSearch = $event"
      @data-selected-click="data => onSearch(data)"
    />
    <ChongZhiMiMaPopup
      :show="showCZMM" 
      :dataValue="selete"
      @update:show="showCZMM = $event" 
      @data-selected-click="data => setPwd(data)"
    />
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  watch,
  nextTick,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import uiUtil from "@/util/UiUtil.js";
import {
  showDialog,
  showConfirmDialog,
  showFailToast,
  showSuccessToast,
} from "vant";
import ShaiXuanTiaoJianPoPups from "@/components/yhgl/ShaiXuanTiaoJianPoPup.vue";
import ChongZhiMiMaPopup from "@/components/yhgl/ChongZhiMiMaPopup.vue";
const tableData = ref([]);
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const finished = ref(false);
const showSearch = ref(false);
const showCZMM = ref(false);
const dataValue = ref({});
const selete = ref({});
const props = defineProps({
  dataValue: {
    type: Object,
    default: {},
  },
});

watch(
  () => props.dataValue,
  (newShow) => {
    init();
  }
);
const onSearch = (item) => {  
  console.log('wwwwwwww',item);
  dataValue.value = item
  onRefresh()
};

const onPwd = (event, item, index) => {  
  event.stopPropagation(); // 阻止事件冒泡
  selete.value = item
  showCZMM.value = true
};

const onCancel = (event) => {
  event.stopPropagation(); // 阻止事件冒泡
  dataValue.value = {}
  onRefresh()
};
onMounted(() => {
  init();
});
const init = () => {
  onRefresh();
};

const onRefresh = () => {
  page = 1;
  getData();
};
const getData = async () => {
  await getDataList();
};
function onLoad() {
  if (loading.value) {
    return;
  }
  page = page + 1;
  getData();
}
let page = 1;
let size = 20;
const getDataList = async () => {
  loading.value = true;
  const params = {
    page: page,
    size: size,
    EnterprisePersonName: dataValue.value.qymc,
    UserLoginName: dataValue.value.yhzh,
    LinkmanPhone: dataValue.value.lxdh,
  };
  uiUtil.http().getObj({
    url: uiUtil.urlPath.getFilingEnterprisePersonList,
    data: params,
    start: () => {
      uiUtil.toastLoading();
    },
    succeed: (res) => {
      // loading.value = false;
      // debugger
      // console.log('1ucceed=', res)
      if (!res || !res.code || 200 != res.code) {
        uiUtil.toastFail(res.msg);
        return;
      }
      if (!res.data || !res.data) {
        // 如果返回数据为空，表示已加载完成
        finished.value = true;
        uiUtil.toastClose();
        return;
      }
      if (res.data.records.length > 0) {
        if (params.page == 1) {
          tableData.value = res.data.records;
        } else {
          tableData.value.push(...res.data.records);
        }
        // console.log('444444444', tableData.value);
      } else if (params.page == 1) {
        tableData.value = [];
      }
      uiUtil.toastClose();
    },
    failed: (res) => {
      // debugger
      console.log("failed=", res);
      // showFailToast('失败')
      uiUtil.toastFail("失败");
    },
    finish: () => {
      uiUtil.toastClose();
      loading.value = false;
    },
  });
};

const onDelete = async (event, item, index) => {
  event.stopPropagation(); // 阻止事件冒泡
  showConfirmDialog({
    title: "提示",
    message: "是否确定删除",
  })
    .then(async () => {
      // 确定
      httpDelete(item, "0");
    })
    .catch(() => {
      // 取消
    });
};

const onHuiFu = async (event, item, index) => {
  event.stopPropagation(); // 阻止事件冒泡
  showConfirmDialog({
    title: "提示",
    message: "是否确定恢复",
  })
    .then(async () => {
      // 确定
      httpDelete(item, "1");
    })
    .catch(() => {
      // 取消
    });
};

const httpDelete = async (item, status) => {
  const params = {
    UserID: item.UserID,
    UserStatus: status,
  };
  uiUtil.http().getObj({
    url: uiUtil.urlPath.delOrRecoverFilingEnterprisePerson,
    data: params,
    start: () => {
      uiUtil.toastLoading();
    },
    succeed: (res) => {
      onRefresh();
    },
    failed: (res) => {
      // debugger
      console.log("failed=", res);
      // showFailToast('失败')
      uiUtil.toastFail("失败");
    },
    finish: () => {
      // uiUtil.toastClose();
      loading.value = false;
    },
  });
};

const setPwd = async (item) => {
  showCZMM.value = false
  onRefresh()
}
const onEdit = async (event, item, index) => {
  event.stopPropagation(); // 阻止事件冒泡
  router.push({ path: uiUtil.routerPath.EditInfoPage, query: { ...item } });
}
</script>

<style scoped>
.my-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.my-header,
.my-footer {
  flex: 0 0 auto;
  text-align: center;
  padding: 0;
  overflow: auto;
  margin: 0 12px;
}

.my-content {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0 12px;
}

.my-list {
  padding-bottom: 100px;
}

.my-item-list {
  margin: 0 12px;
}

.my-item-cell {
  margin: 12px 0 0 0;
  padding: 16px 12px;
  border-radius: 4px;
  background-color: white;
}

.my-item-cell-title {
  display: flex;
  font-size: 13px;
  font-weight: 500;
  color: #222;
  align-items: center;
}

.my-item-cell-title-text {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #222;
}

.my-item-cell-title-status-0 {
  font-size: 10px;
  font-weight: 400;
  color: #888;
  background-color: #f5f5f5;
  padding: 4px 8px;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  margin-right: 5px;
}

.my-item-cell-title-status-1 {
  font-size: 10px;
  font-weight: 400;
  color: #2a95ff;
  background-color: #e7f6ff;
  padding: 4px 8px;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  margin-right: 5px;
}

.my-item-cell-title-status-2 {
  font-size: 10px;
  font-weight: 400;
  color: #16ce8a;
  background-color: #e7fff6;
  padding: 4px 8px;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  margin-right: 5px;
}

.my-item-cell-title-status-3 {
  font-size: 10px;
  font-weight: 400;
  color: #ff6429;
  background-color: #ffefdf;
  padding: 4px 8px;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  margin-right: 5px;
}

.my-item-cell-title-status-4 {
  font-size: 10px;
  font-weight: 400;
  color: #eea300;
  background-color: #fff6e7;
  padding: 4px 8px;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  margin-right: 5px;
}

.my-item-cell-label {
  margin-top: 12px;
  border-radius: 4px;
  background-color: #f9f9f9;
  padding: 16px;
}

.my-item-text-title {
  display: inline-block;
  min-width: 50px;
  font-size: 12px;
  font-weight: 400;
  line-height: 26px;
  color: #888;
}

.my-item-text-content {
  margin-left: 20px;
  font-size: 12px;
  font-weight: 400;
  color: #222;
}

.my-item-time-div {
  margin-top: 12px;
  text-align: center;
}

.my-item-time {
  border-radius: 65px;
  padding: 6px 15px;
  background-color: #fff;
  font-size: 12px;
  font-weight: 400;
  color: #666;
}

.my-item-cell-btn {
  margin-top: 12px;
  text-align: right;
}

.my-item-cell-btn .van-button {
  height: 36px;
}

.tj-search {
  background: none;
  --van-search-content-background: #fff;
}
.tj-search-btn {
  background: linear-gradient(to right, #00bf87, #25f0a0);
  color: #fff;
  padding: 3px 17px;
  border-radius: 24px;
  text-align: center;
}

.ba-item-cell-btn {
  margin-top: 12px;
  text-align: right;
}

.ba-item-cell-btn .van-button {
  height: 36px;
}

.my-search {
  background-color: #fff;
  border-radius: 34px;
  margin: 12px 12px 0 12px;
  height: 35px;
  padding: 3px 12px;
  align-items: center;
  display: flex;
  color: #bbbbbb;
  font-size: 13px;
}
.my-search-icon {
  font-size: 18px;
}
.my-search-input {
  flex: 1;
  margin-left: 6px;
  font-size: 13px;
}
.my-search-btn {
  background: linear-gradient(to right, #00bf87, #25f0a0);
  color: #fff;
  padding: 6px 17px;
  border-radius: 24px;
  text-align: center;
}
</style>